<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>API-首页</title>
		<!-- 1.引入重置样式表 -->
		<link rel="stylesheet" href="../css/reset.css" />
		<!-- 2.引入常态化样式表 -->
		<link rel="stylesheet" href="../css/normalize.css" />
		<!-- 3.引入公共样式 -->
		<link rel="stylesheet" href="../css/common.css" />
		<!-- 4.引入当前页样式 -->
		<link rel="stylesheet" href="../css/api-index.css" />
		<link rel="stylesheet" href="../css/api-snakeBtn.css" />
	</head>
	<body>
		<header class="flex-c-sb b-box">
			<!-- 
				logo
				1.img直接写logo
				2.支持SEO 在a标签中套一个h1标签，然后给h1
				增加背景图
			 -->
			<a href="#">
				<h1></h1>
			</a>
			<!-- 导航列表 -->
			<ul class="flex-c-c fc-black">
				<li>
					<a href="../html/index.html">首页</a>
				</li>
				<li class="active">
					<a href="../html/api-index.html">API</a>
				</li>
				<li>
					<a href="../html/index.html">云服务</a>
				</li>
				<li>
					<a href="../html/customer.html">案例</a>
				</li>
				<li>
					<a href="../html/index.html">开发者</a>
				</li>
			</ul>
			<!-- 按钮 -->
			<div>
				<span class="fc-black"
					><a href="../html/login.html" class="a-first">登录</a></span
				>
				<span class="fc-white"
					><a href="../html/register.html" class="a-last">注册有礼</a></span
				>
			</div>
		</header>
		<main>
			<!-- API分类 -->
			<section id="apiList">
				<div class="container text">
					<!-- 标题 -->
					<h2>API分类</h2>
					<!-- 按钮 -->
					<ul id="apiCateList">
						<!-- <li class="active">全部</li>
						<li>生活服务</li>
						<li>金融科技</li>
						<li>交通地理</li>
						<li>充值缴费</li>
						<li>数据智能</li>
						<li>企业工商</li>
						<li>应用开发</li>
						<li>电子商务</li>
						<li>吃喝玩乐</li>
						<li>文娱视频</li>
						<li>免费接口大全</li>
						<li>短信</li>
						<li>汽车</li>
						<li>核验</li>
						<li>最新发布</li>
						<li>API私有化部署</li> -->
					</ul>
				</div>
			</section>
			<!-- 搜索框 -->
			<section>
				<div class="container">
					<div id="search-box">
						<strong>全部</strong>
						<div id="search">
							<input type="text" placeholder="身份证实名" />
							<img src="../imgs/search.png" alt="" width="26" />
						</div>
					</div>
				</div>
			</section>
			<!-- 小盒子 -->
			<div id="Box" class="container">
				<ul class="apiBox">
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>

					<li>
						<img src="../imgs/API_01.jpg" alt="" />
						<p>2021出行防疫政策指南</p>
						<p>免费</p>
						<span>企业专用</span>
						<a href="#">申请数据</a>
					</li>
				</ul>
			</div>
		</main>
		<!-- /* 盒子下面页码 */ -->
		<!-- 分页器 -->
		<section id="pagination">
			<ul>
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</section>
		<footer>
			<div class="container flex-c-sb cf">
				<div class="fl">
					<ul class="flex-c-sb">
						<li>
							<h5>联系与支持</h5>
							<p>400-882-7715</p>
							<p>售前咨询</p>
							<p>客服&售后</p>
							<p>常见问题</p>
							<p>极速工单</p>
							<p>投诉与建议</p>
						</li>
						<li>
							<h5>关于源码</h5>
							<p>400-882-7715</p>
							<p>售前咨询</p>
							<p>客服&售后</p>
							<p>常见问题</p>
							<p>极速工单</p>
							<p>投诉与建议</p>
						</li>
						<li>
							<h5>快速入口</h5>
							<p>400-882-7715</p>
							<p>售前咨询</p>
							<p>客服&售后</p>
							<p>常见问题</p>
							<p>极速工单</p>
							<p>投诉与建议</p>
						</li>
						<li>
							<h5>产品服务</h5>
							<p>400-882-7715</p>
							<p>售前咨询</p>
							<p>客服&售后</p>
							<p>常见问题</p>
							<p>极速工单</p>
							<p>投诉与建议</p>
						</li>
						<li>
							<h5>解决方案</h5>
							<p>400-882-7715</p>
							<p>售前咨询</p>
							<p>客服&售后</p>
							<p>常见问题</p>
							<p>极速工单</p>
							<p>投诉与建议</p>
						</li>
					</ul>
					<div class="text-b">
						<p>
							<img src="../imgs/bei2.png" alt="" width="23" />
							<img src="../imgs/bei1.png" alt="" width="23" />
							增值电信业务经营许可证：蜀B2-20180596蜀ICP备15006450号-3营业执照
						</p>
					</div>
				</div>

				<div class="wx fr">
					<h4>微信公众号</h4>
					<p>源码时代</p>
					<img src="../imgs/wechat-white.png" alt="" width="100" class="code" />
					<p>源码大数据股份有限公司©版权所有</p>
				</div>
			</div>
		</footer>
		<!-- 蒙层 -->
		<div id="mask">
			<!-- 登录框 -->
			<div id="loginModal">
				<!-- logo -->
				<div id="loginModalLogo"></div>
				<!-- tab区 -->
				<div id="loginModalTab">
					<a class="active" href="javascript:void 0">账号登录</a>
					<i></i>
					<a href="javascript:void 0">扫码登录</a>
				</div>
				<!-- 表单区 -->
				<form
					id="loginForm"
					action="index.html"
					method="post"
					style="display: block"
				>
					<!-- 用户名 -->
					<p id="loginUser">
						<i></i>
						<input type="text" placeholder="用户名/手机号/邮箱" />
					</p>
					<!-- 密码 -->
					<p id="loginPwd">
						<i></i>
						<input type="password" placeholder="密码" />
					</p>
					<!-- 忘记密码 -->
					<p id="forgetPwd">
						<a href="#">忘记密码</a>
					</p>
					<!-- 登录 -->
					<p class="snake-btn">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<input type="submit" value="登录" id="loginBtn" />
					</p>
					<!-- 立即注册 -->
					<p id="register">还没有源码账号，<span>立即注册 &gt;</span></p>
				</form>
				<!-- 二维码表单 -->
				<form id="code" action="index.html" method="post" style="display: none">
					<div>
						<i><img src="../imgs/showqrcode.jpg" alt="" width="107" /></i>
						<p>微信扫码登录</p>
						<p>未关注源码科技公众号,请先关注后再登录</p>
					</div>
					<!-- 立即注册 -->
					<p id="register-two">还没有源码账号，<span>立即注册 &gt;</span></p>
				</form>
			</div>
		</div>
		<!-- 1.引入util的js -->
		<script src="../js/util.js"></script>
		<!-- 2.引入当前页的js -->
		<script src="../js/api-index.js"></script>
	</body>
</html>
